<template>
  <div class="header bg-dark-blue">
    <van-nav-bar class="bg-dark-blue"
                 @click-left="targetPopup"
                 @click-right="search">
      <!-- <van-icon name="wap-nav"
                @click="targetPopup"
                slot="left">

                color: #fff;
    font-size: 0.22rem;
    font-weight: 600;

      </van-icon> -->
      <router-link to='home'
                   class="font-white"
                   slot="title">
        VRBOX
      </router-link>

      <img src="@/assets/image/header/icon-menu.png"
           width="50"
           height="50"
           slot="left"
           alt="">

      <img src="@/assets/image/header/icon-search.png"
           width="50"
           height="50"
           slot="right"
           alt="">
    </van-nav-bar>

    <van-popup v-model="show"
               position="left"
               @click="show=false"
               :style="{height:'100%',width:'60%'}">

      <!--  top -->
      <div class="nav-top"
           v-if="userInfo">
        <van-icon name="manager"
                  class="icon-user"
                  color="#d1d1d1" />
        <router-link to="/login"
                     class="font-gray bth-login font-s-28">
          {{userInfo.nickname}}
        </router-link>

      </div>

      <div class="nav-top"
           v-else>
        <van-icon name="manager"
                  class="icon-user"
                  color="#d1d1d1" />
        <router-link to="/login"
                     class="font-gray bth-login font-s-28">
          登录
        </router-link>
        <span class="font-gray">|</span>
        <router-link to="/register"
                     class="font-gray  bth-register font-s-28">
          注册
        </router-link>
      </div>
      <!-- slider -->
      <div class="slider">
        <div>
          <router-link to="home"
                       class="a-item font-s-30 active">
            首页
          </router-link>
        </div>
        <div>
          <router-link to="home"
                       class="a-item font-s-30">
            产品系列
          </router-link>
        </div>
        <div>
          <router-link to="home"
                       class="a-item font-s-30">
            k12专区
          </router-link>
        </div>
        <div>
          <router-link to="home"
                       class="a-item font-s-30">
            开发者平台
          </router-link>
        </div>
      </div>

      <van-button round
                  v-if="userInfo"
                  color="#4D4D4D"
                  class="log-out"
                  @click="logOut"
                  type="info">退出</van-button>

    </van-popup>

  </div>

</template>

<script>
import { mapState } from 'vuex'
import { removeLoginCookie } from '@/axios/utils'
export default {
  name: 'Header',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    removeLoginCookie,
    targetPopup () {
      this.show = true
    },
    search () {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        // overlay: true,
        message: '功能待开发，请稍后'
      })
      let second = 2
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `功能待开发，请稍后`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          this.$toast.clear()
        }
      }, 1000)
    },
    logOut () {
      this.removeLoginCookie()
      this.$store.commit('save', { path: 'userInfo', data: '' })
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: $header-h;
  //  header
  .van-nav-bar {
    background-color: #111111;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
  }
  .van-nav-bar__left {
    left: 0;
    img {
      vertical-align: middle;
    }
  }
  .van-nav-bar__right {
    right: 0;
    img {
      vertical-align: middle;
    }
  }
  //  左侧导航栏
  .van-popup--left {
    padding-top: 0.2rem;
    background-color: #131622;
  }
  .nav-top {
    padding-left: 0.3rem;
    .icon-user {
      display: inline-block;
      height: px-calc(80);
      width: px-calc(80);
      border: 1px solid #fff;
      border-radius: 50%;
      text-align: center;
      font-size: 0.26rem;
      line-height: 0.38rem;
      vertical-align: px-calc(-12);
      background-color: #4d4d4d;
    }
    .bth-login {
      margin-left: 0.15rem;
    }
  }

  .font-gray {
    color: #b3b3b3;
  }
  .slider {
    margin-top: 0.35rem;
    color: #d1d1d1;
    line-height: 30px;
    .a-item {
      display: block;
      width: 1.2rem;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #fff;
      padding-left: 0.3rem;
      margin-top: 0.05rem;
    }
    .active {
      background-color: $theme-color;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      box-shadow: 0px 10px 20px 0px rgba(98, 54, 255, 0.2);
    }
  }
  .log-out {
    position: absolute;
    bottom: 75px;
    left: 30px;
    padding: 0rem;
    width: 0.8rem;
    height: 32px;
    line-height: 0.3rem;
  }
}
::v-deep .van-hairline--bottom {
  &::after {
    border: 0;
  }
}
</style>
